<template>
  <div class="fit-list-box">
    <div class="search-section" >
      <div class="category-select">
        <van-field v-model="categoryName" placeholder="请选择运动类型" @click="selectCateEvent"  readonly />
        <van-popup v-model="cateSelectShow"  position="bottom">
          <van-picker
            show-toolbar
            title="运动类型"
            :columns="columns"
            @cancel="onCancel"
            @confirm="onConfirm"
            />
        </van-popup>
      </div>
      <search class="search-field" placeholder="请输入名称" v-model="searchValue" @search="onSearch" />
    </div>
    <div class="list">
      <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
        <van-list class="list-container"
          v-model="moreLoading"
          :finished="moreFinished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad">
          <template v-for="point in list">
            <fit-item class="point-item" :key="point.id"  :point="point" :start="{lng: userPosition.lng, lat: userPosition.lat}" @wxNavigate="wxOpenLocation"></fit-item>
          </template>
          <!-- <empty-data  :empty="list.length === 0 && !moreLoading"></empty-data> -->
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { Picker } from 'vant'
import FitItem from './FitItem'
import Search from '@/components/Search'
import { API_SPORT_TYPES, API_VENUES_NEARBY } from '@/service/veneue'
import { mapGetters } from 'vuex'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  components: {
    FitItem,
    Search,
    [Picker.name]: Picker
  },
  props: ['free'],
  data () {
    return {
      pageSize: 8,
      categoryValue: '',
      categoryName: '全部',
      searchValue: '',
      pageNumber: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
      searchLoading: false,
      searchState: false,
      cateSelectShow: false,
      list: [],
      categories: []
    }
  },
  computed: {
    ...mapGetters({
      userPosition: 'getUserPosition'
    }),
    columns () {
      let selects = this.categories.map(item => item.sportsName)
      selects.unshift('全部')
      return selects
    }
  },
  mounted () {
    this.requestSportsTypes()
    this.moreLoading = true
    this.requestlist(resData => {
      this.list = resData.list.resultList
    }).finally(() => {
      this.moreLoading = false
    })
  },
  watch: {
    searchValue (newValue) {
      if (!newValue) {
        this.searchState = false
      }
    },
    userPosition: {
      handler (newValue) {
        this.onRefresh()
      },
      deep: true
    }
  },
  methods: {
    wxOpenLocation (point) {
      this.openWechatLocation(point)
    },
    selectCateEvent () {
      this.cateSelectShow = true
    },
    onCancel () {
      this.cateSelectShow = false
    },
    onConfirm (value, index) {
      if (value === '全部') {
        this.categoryValue = ''
      } else {
        this.categoryValue = this.categories[index - 1].sportsTypeId
      }
      this.categoryName = value
      this.onSearch()
      this.cateSelectShow = false
    },
    // 请求类目
    requestSportsTypes () {
      API_SPORT_TYPES().then(resData => {
        this.categories = resData.list
      })
    },
    requestlist (callback) {
      let reqData = {
        isFree: this.free,
        lon: this.userPosition.lng,
        lat: this.userPosition.lat,
        nameLike: this.searchState ? this.searchValue : '',
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize,
        sportsTypeId: this.categoryValue
      }
      return API_VENUES_NEARBY(reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      })
    },
    onLoad () {
      if (this.refreshLoading || this.searchLoading) {
        this.moreLoading = false
        return
      }
      this.requestlist(resData => {
        let { resultList } = resData.list
        this.list = [...this.list, ...resultList]
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onRefresh () {
      this.pageNumber = 0
      let reqData = {
        isFree: this.free,
        lon: this.userPosition.lng,
        lat: this.userPosition.lat,
        nameLike: this.searchState ? this.searchValue : '',
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize,
        sportsTypeId: this.categoryValue
      }
      API_VENUES_NEARBY(reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      }).finally(() => {
        this.refreshLoading = false
      })
    },
    onSearch () {
      this.searchLoading = true
      this.searchState = true
      this.pageNumber = 0
      let reqData = {
        isFree: this.free,
        lon: this.userPosition.lng,
        lat: this.userPosition.lat,
        nameLike: this.searchState ? this.searchValue : '',
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize,
        sportsTypeId: this.categoryValue
      }
      API_VENUES_NEARBY(reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      })
    }
  }
}
</script>

<style scoped lang="less">
.fit-list-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search-section{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 12px;
  display: flex;
  justify-content: space-around;
}
.category-select {
  border: 1px solid #F3F3F3;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -4.5/2px;
    border-left: 17/4px solid transparent;
    border-right: 17/4px solid transparent;
    border-top: 9/2px solid #666;
    transition: transform .3s cubic-bezier(.86,0,.07,1), -webkit-transform .3s cubic-bezier(.86,0,.07,1);
  }
  /deep/.van-cell{
    padding: 4px 37/2px 4px 19px;
  }
}
.category-select, .search-field {
  flex: 0 0 48%;
}
.list{
  flex: 1;
  overflow: auto;
}
.list-container{
  overflow: hidden;
  min-height: calc(100vh - @headBarHeight - 54px - 120px);
}
</style>
